<template>
    <div class="login-container">
        <div class="header1">
                <span>exCitiLoan | 易旗贷</span>
                <span @click="toHome" >返回</span>
        </div>
        <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="top"
        style = "margin-top:0px"
        >

            <el-form-item prop="username" style="margin-bottom:40px">
                <span class="svg-container">
                    <svg-icon icon-class="user" />
                </span>
                <el-input
                ref="username"
                v-model="loginForm.userPhone"
                placeholder="用户名/身份证号"
                name="username"
                type="text"
                tabindex="1"
                auto-complete="on"
                />
            </el-form-item>

            <el-form-item prop="password" style="margin-bottom:40px">
                <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.userPassword"
                :type="passwordType"
                placeholder="密码"
                name="password"
                tabindex="2"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
                />
                <span class="show-pwd" @click="showPwd">
                    <svg-icon
                    :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                    />
                </span>
            </el-form-item>

            <el-button
            :loading="loading"
            type="primary"
            style="width: 100%; margin-bottom: 30px"
            @click.native.prevent="handleLogin"
            >登录</el-button>

            <div class="tips">
                <span style="margin-right: 20px;color:grey" @click="openRegister">注册</span>
                <span style="float: right;color:grey" @click="findPassword"> 找回密码</span>
            </div>
        </el-form>

        <el-dialog
        title="用户注册"
        width="70%"
        >
            <registerTable
            :user="user"
            @on-success="handleRegister"
            @on-cancel="handleCancel"
            ></registerTable>
        </el-dialog>
    </div>
</template>

<script>
export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Login',
    data() {
    return {
        loginForm: {
            userPhone: '',
            userPassword: ''
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        dialogRegisterVisible: false,
        user: {
            userName : '',
            userPhone: '',
            userPassword: '',
            userRole: 'WORKER'
        }, // for register
        myUserId: 0
    }
    },
    methods:{
        handleLogin(){
        this.$router.push({name:'creditRating'})
        },
        showPwd(){},
        openRegister(){
            this.$router.push({name:'register'})
        },
        handleRegister(){},
        handleCancel(){},
        loginRules(){
        },
        toHome(){
            this.$router.push({name:'creditRating'})
        }
    }
}
</script>


<style lang = "less" scoped>
.header1{
    display:flex;
    justify-content: space-between;  //两端对齐
    align-items:center;    // 在竖直方向上在交叉轴中点对齐
    width:100%;
    height:60px;
    background-color:rgb(34, 76, 190);
    span{
        color:white;
        margin-left: 20px;
        margin-right:20px;
    }
    margin-bottom: 100px;
}
.login-form{
    width:50%;    
    margin:auto;
}
</style>